﻿<script setup lang="ts" name="EpPaginationList">
import { getPaginationList } from '@/api/elementPlus'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const initData: any = reactive({
  data: [],
  total: 0
})
const pageIndex = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const getInitData = () => {
  loading.value = true
  getPaginationList({ pageIndex: pageIndex.value, pageSize: pageSize.value }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        initData.data = []
        initData.data.push(...res.data)
        initData.total = res.total
        console.log(initData)
        loading.value = false
      }, 2000)
    }
  })
}
getInitData()
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getInitData()
}
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getInitData()
}
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-alert title="分页类列表展示，本页面主要使用element-plus的骨架屏、图片、进度条、分页、消息提示、空数据状态（数据加载后总条数改为0）组件。" type="success" :closable="false" show-icon />
      <el-skeleton :loading="loading" animated :count="6">
        <template #template>
          <div class="list-item">
            <div class="item-image">
              <el-skeleton-item variant="image" style="width: 76px; height: 76px" />
            </div>
            <div class="item-content">
              <el-skeleton-item variant="text" style="width: 50%;margin: 4px 0" />
              <el-skeleton-item variant="text" />
            </div>
            <div class="item-content">
              <el-skeleton-item variant="text" style="width: 20%;margin: 4px 0" />
              <el-skeleton-item variant="text" style="width: 40%;" />
            </div>
            <div class="item-content">
              <el-skeleton-item variant="text" style="width: 20%;margin: 4px 0" />
              <el-skeleton-item variant="text" style="width: 80%;" />
            </div>
            <div class="item-content">
              <el-skeleton-item variant="text" />
            </div>
          </div>
        </template>
        <template #default>
          <el-empty v-if="initData.total === 0" :image-size="200" :description="$t('settings.settingNoData')" />
          <ul v-else class="list-container">
            <li class="list-item" v-for="(item, index) in initData.data" :key="index">
              <div class="item-image">
                <el-image :src="'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'" fit="cover" lazy>
                  <template #placeholder>
                    <div class="image-slot">
                      <div class="slot-content">
                        <svg-icon icon="ep:picture"></svg-icon>
                        <p>{{ $t('settings.settingLoadingText') }}</p>
                      </div>
                    </div>
                  </template>
                  <template #error>
                    <div class="image-slot">
                      <div class="slot-content">
                        <svg-icon icon="ii:icon-image-failed"></svg-icon>
                        <p>{{ $t('settings.settingLoadingFailed') }}</p>
                      </div>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="item-content">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-description">{{ item.description }}</div>
              </div>
              <div class="item-content">
                <div class="item-thead">作者</div>
                <div class="item-description">{{ item.author }}</div>
              </div>
              <div class="item-content">
                <div class="item-thead">时间</div>
                <div class="item-description">{{ item.date }}</div>
              </div>
              <div class="item-content">
                <el-progress v-if="item.percentage > 90" :stroke-width="10" :percentage="item.percentage" status="success" />
                <el-progress v-if="item.percentage > 70 && item.percentage <= 90" :stroke-width="10" :percentage="item.percentage" status="warning" />
                <el-progress v-if="item.percentage > 50 && item.percentage <= 70" :stroke-width="10" :percentage="item.percentage" status="exception" />
                <el-progress v-if="item.percentage <= 50" :stroke-width="10" :percentage="item.percentage" :color="item.color" />
              </div>
            </li>
          </ul>
        </template>
      </el-skeleton>
      <el-pagination
        v-if="initData.total > 0"
        v-model:currentPage="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 100, 200]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="initData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-pagination {
  justify-content: center;
  margin-top: var(--el-space);
}

.list-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);

  .item-image {
    padding: 10px;

    .el-image {
      width: 76px;
      height: 76px;
    }
  }

  .item-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;

    .item-title {
      margin: 4px 0;
      color: var(--el-text-color-regular);
    }

    .item-thead {
      margin: 4px 0;
      color: var(--el-text-color-placeholder);
    }

    .item-description {
      color: var(--el-text-color-placeholder);
    }

    .el-progress {
      width: 100%;

      :deep(.el-progress__text) {
        font-size: 14px !important;
      }
    }
  }
}
</style>
